<template>
  <div class="all">
    <div class="left">
      <p class="l1">
        {{score.overall_score|getxs}}
      </p>
      <p class="l2">
        综合评价
      </p>
      <p class="l3">
        高于周边商家{{score.compare_rating|getbfb}}
      </p>
    </div>
    <div class="right">
      <span class="r1">
        服务态度
      </span>
      <van-rate class="myrate" v-model="score.service_score" allow-half void-icon="star" color="rgb(255,154,13)"
        readonly :size="7" />
      <span class="r2">
        {{score.service_score|getxs}}
      </span>
      <br>
      <span class="r1">
        菜品评价
      </span>
      <van-rate class="myrate" v-model="score.service_score" allow-half void-icon="star" color="rgb(255,154,13)"
        readonly :size="7" />
      <span class="r2">
        {{score.food_score|getxs}}
      </span>
      <br>
      <span class="r1">
        送达时间
      </span>
      <span class="r2">
        {{score.deliver_time}}
      </span>
      <span class="minute">
        分钟
      </span>
    </div>
  </div>
</template>
<script>
  export default {
    data() {
      return {
      }
    },
    props: ['score'],
    filters: {
      getbfb(value) {
        if (typeof (value) == 'undefined') {
          return value;
        } else {
          return `${(value * 100).toFixed(1)}%`;
        }
      },
      getxs(value) {
        if (typeof (value) == 'undefined') {
          return value;
        } else {
          return `${value.toFixed(1)}`;
        }
      }
    },
  }
</script>
<style lang="less" scoped>
  .all {
    border-top: 1px solid gainsboro;
    padding-bottom: 10px;
    padding-top: 10px;
    background-color: white;
  }

  .left {
    float: left;
    margin-left: 30px;
  }

  .l1 {
    text-align: center;
    color: rgb(255, 102, 0);
    font-size: 25px;
    /*no*/
  }

  .r2 {
    color: rgb(255, 102, 0);
    font-size: 13px;
  }

  .l2 {
    text-align: center;
    margin-top: 5px;

  }

  .l3 {
    text-align: center;
    color: grey;
    font-size: 12px;
    /*no*/
    margin-top: 5px;
  }

  ·· .right {
    float: right;
  }

  .r1 {
    color: rgb(100, 98, 98);
    margin: 5px 0 0 28px;
    display: inline-block;
    font-size: 15px;
  }

  .minute {
    color: rgb(100, 98, 98);
    font-size: 12px;
    margin-top: 2px;
  }

  .myrate {
    margin: 5px;
  }
</style>